<template>
    <div class="home-container">
        <!-- 当日采购/出库数量 -->
        <div class="purchase-outbound-container">
            <VueDataUi component="VueUiSparkbar" :dataset="purchaseOutboundDataset" :config="purchaseOutboundConfig" />
        </div>
        <!-- 文件分布情况 -->
        <div class="file-distribution-container">
            <VueDataUi component="VueUi3dBar" :dataset="fileDistributionDataSet" :config="fileDistributionConfig" />
        </div>
        <!-- CPU 信息展示容器 -->
        <div class="cpu-container">
            <VueDataUi component="VueUiWheel" :dataset="cpuDataSet" :config="cpuConfig" />
        </div>
        <!-- 内存 信息展示容器 -->
        <div class="memory-container">
            <VueDataUi component="VueUiWheel" :dataset="memoryDataSet" :config="memoryConfig" />
        </div>
        <!-- 存储 信息展示容器 -->
        <div class="storage-container">
            <VueDataUi component="VueUiWheel" :dataset="storageDataSet" :config="storageConfig" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getComprehensiveInfo, getFileDistribution, getServerCpu, getServerMemory, getServerStorage } from '@/api/home';
import { VueUiWheelDataset, VueUiWheelConfig, VueUiSparkbarDatasetItem, VueUiSparkbarConfig } from 'vue-data-ui';
import { VueUi3dBarDataset, VueUi3dBarConfig } from 'vue-data-ui';
import { VueDataUi } from 'vue-data-ui';
import { byteToGb } from 'numb-tools';

onMounted(async () => {
    // 每3秒更新一次CPU信息
    cpuTimer = setInterval(async () => {
        const cpuInfo = await getServerCpu();
        cpuDataSet.value.percentage = cpuInfo.data.usage;
    }, 3000);

    // 每10秒更新一次内存信息
    memoryTimer = setInterval(async () => {
        const memoryInfo = await getServerMemory();
        memoryDataSet.value.percentage = (memoryInfo.data.usedmem / memoryInfo.data.totalmem) * 100;
    }, 10000);
});

onUnmounted(() => {
    clearTimeout(cpuTimer);
    clearTimeout(memoryTimer);
});

/* ******************************客户数量/供应商数量/采购/出库数量属性/方法****************************** */
const comprehensiveInfo = await getComprehensiveInfo();
const purchaseOutboundDataset = ref<VueUiSparkbarDatasetItem[]>([
    {
        name: '客户数量',
        value: comprehensiveInfo.data.customerCount,
        color: '#6376DD',
        prefix: '',
        suffix: '位',
        rounding: 0,
    },
    {
        name: '供应商数量',
        value: comprehensiveInfo.data.supplierCount,
        color: '#42d392',
        prefix: '',
        suffix: '位',
        rounding: 0,
    },
    {
        name: '当日订单量',
        value: comprehensiveInfo.data.orderCount,
        color: '#ff6400',
        prefix: '',
        suffix: '单',
        rounding: 0,
    },
    {
        name: '当日采购量',
        value: comprehensiveInfo.data.purchaseCount,
        color: '#4db2ff',
        prefix: '',
        suffix: '单',
        rounding: 0,
    },
    {
        name: '当日出库量',
        value: comprehensiveInfo.data.outboundCount,
        color: '#ff2233',
        prefix: '',
        suffix: '单',
        rounding: 0,
    },
]);
const purchaseOutboundConfig = ref<VueUiSparkbarConfig>();

/* ******************************内存属性/方法****************************** */
let memoryTimer: any = null;
const memoryInfo = await getServerMemory();
const memoryDataSet = ref<VueUiWheelDataset>({
    percentage: (memoryInfo.data.usedmem / memoryInfo.data.totalmem) * 100,
});
const memoryConfig = ref<VueUiWheelConfig>({
    responsive: true,
    style: {
        fontFamily: 'inherit',
        chart: {
            backgroundColor: '#FFFFFFff',
            color: '#1A1A1Aff',
            animation: {
                use: true,
                speed: 0.5,
                acceleration: 1,
            },
            layout: {
                wheel: {
                    ticks: {
                        type: 'classic',
                        rounded: true,
                        inactiveColor: '#e1e5e8',
                        activeColor: '#6376DD',
                        sizeRatio: 0.9,
                        quantity: 100,
                        strokeWidth: 5,
                        gradient: {
                            show: true,
                            shiftHueIntensity: 10,
                        },
                    },
                },
                innerCircle: {
                    show: true,
                    stroke: '#e1e5e8ff',
                    strokeWidth: 1,
                },
                percentage: {
                    show: true,
                    fontSize: 48,
                    rounding: 0,
                    bold: true,
                    formatter: null,
                },
            },
            title: {
                text: '系统内存',
                color: '#1A1A1Aff',
                fontSize: 20,
                bold: true,
                textAlign: 'center',
                paddingLeft: 0,
                paddingRight: 0,
                subtitle: {
                    color: '#A1A1A1ff',
                    text: `${byteToGb(memoryInfo.data.totalmem)} / ${byteToGb(memoryInfo.data.usedmem)}`,
                    fontSize: 16,
                    bold: false,
                },
            },
        },
    },
    userOptions: {
        show: false,
    },
});

/* ******************************储存属性/方法****************************** */
const storageInfo = await getServerStorage();
const storageDataSet = ref<VueUiWheelDataset>({
    percentage: (storageInfo.data.usedStorage / storageInfo.data.totalStorage) * 100,
});
const storageConfig = ref<VueUiWheelConfig>({
    responsive: true,
    style: {
        fontFamily: 'inherit',
        chart: {
            backgroundColor: '#FFFFFFff',
            color: '#1A1A1Aff',
            animation: {
                use: true,
                speed: 0.5,
                acceleration: 1,
            },
            layout: {
                wheel: {
                    ticks: {
                        type: 'classic',
                        rounded: true,
                        inactiveColor: '#e1e5e8',
                        activeColor: '#6376DD',
                        sizeRatio: 0.9,
                        quantity: 100,
                        strokeWidth: 5,
                        gradient: {
                            show: true,
                            shiftHueIntensity: 10,
                        },
                    },
                },
                innerCircle: {
                    show: true,
                    stroke: '#e1e5e8ff',
                    strokeWidth: 1,
                },
                percentage: {
                    show: true,
                    fontSize: 48,
                    rounding: 0,
                    bold: true,
                    formatter: null,
                },
            },
            title: {
                text: '系统储存',
                color: '#1A1A1Aff',
                fontSize: 20,
                bold: true,
                textAlign: 'center',
                paddingLeft: 0,
                paddingRight: 0,
                subtitle: {
                    color: '#A1A1A1ff',
                    text: `${byteToGb(storageInfo.data.totalStorage)} / ${byteToGb(storageInfo.data.usedStorage)}`,
                    fontSize: 16,
                    bold: false,
                },
            },
        },
    },
    userOptions: {
        show: false,
    },
});

/* ******************************文件分布情况属性/方法****************************** */
const fileDistribution = await getFileDistribution();
const fileDistributionDataSet = ref<VueUi3dBarDataset>({
    series: [
        {
            name: '采购',
            value: fileDistribution.data[0].fileCount,
            color: '#5f8bee',
        },
        {
            name: '订单',
            value: fileDistribution.data[1].fileCount,
            color: '#42d392',
        },
        {
            name: '检验报告',
            value: fileDistribution.data[2].fileCount,
            color: '#ff6400',
        },
        {
            name: '图稿',
            value: fileDistribution.data[3].fileCount,
            color: '#bb88ee',
        },
        {
            name: '行政',
            value: fileDistribution.data[4].fileCount,
            color: '#ffff66',
        },
    ],
});
const fileDistributionConfig = ref<VueUi3dBarConfig>({
    theme: '',
    customPalette: [],
    style: {
        fontFamily: 'inherit',
        shape: 'bar',
        chart: {
            animation: { use: true, speed: 1, acceleration: 1 },
            backgroundColor: '#FFFFFF',
            color: '#2D353C',
            bar: { color: '#5f8bee', stroke: '#5f8bee', strokeWidth: 0.7, shadeColor: '#2D353C' },
            box: {
                stroke: '#CCCCCC',
                strokeWidth: 0.7,
                strokeDasharray: 2,
                dimensions: { width: 128, height: 480, top: 27, bottom: 9, left: 24, right: 24, perspective: 18 },
            },
            title: {
                text: '文件分布',
                color: '#2D353C',
                fontSize: 20,
                bold: true,
                textAlign: 'center',
                paddingLeft: 0,
                paddingRight: 0,
                subtitle: { color: '#A1A1A1', text: '详情信息', fontSize: 15, bold: false },
            },
            legend: {
                showDefault: true,
                fontSize: 10,
                color: '#2D353C',
                bold: false,
                roundingValue: 0,
                roundingPercentage: 0,
                prefix: '',
                suffix: '',
                hideUnderPercentage: 3,
            },
            dataLabel: {
                show: true,
                bold: true,
                color: '#5f8bee',
                fontSize: 10,
                rounding: 1,
                // formatter: (params) => {
                //     // 获取当前系列的索引
                //     const index = Number(params.config.seriesIndex);
                //     // 如果大于1GB，则显示为GB，否则显示为MB
                //     if (fileDistribution.data[index].totalSize > 1024 ** 3) {
                //         return convert.bytesToGb(fileDistribution.data[index].totalSize);
                //     } else {
                //         return convert.bytesToMb(fileDistribution.data[index].totalSize);
                //     }
                // },
            },
        },
    },
    userOptions: {
        show: false,
        showOnChartHover: false,
        keepStateOnChartLeave: true,
        position: 'right',
        buttons: {
            tooltip: false,
            pdf: true,
            csv: true,
            img: true,
            table: true,
            labels: false,
            fullscreen: true,
            sort: false,
            stack: false,
            animation: false,
            annotator: true,
        },
        buttonTitles: {
            open: 'Open options',
            close: 'Close options',
            pdf: 'Download PDF',
            csv: 'Download CSV',
            img: 'Download PNG',
            table: 'Toggle table',
            fullscreen: 'Toggle fullscreen',
            annotator: 'Toggle annotator',
        },
        print: { allowTaint: false, backgroundColor: '#FFFFFF', useCORS: false, onclone: null, scale: 2, logging: false },
    },
    table: {
        show: false,
    },
});

/* ******************************CPU属性/方法****************************** */
let cpuTimer: any = null;
const cpuInfo = await getServerCpu();
const cpuDataSet = ref<VueUiWheelDataset>({
    percentage: cpuInfo.data.usage,
});
const cpuConfig = ref<VueUiWheelConfig>({
    responsive: true,
    style: {
        fontFamily: 'inherit',
        chart: {
            backgroundColor: '#FFFFFFff',
            color: '#1A1A1Aff',
            animation: {
                use: true,
                speed: 0.5,
                acceleration: 1,
            },
            layout: {
                wheel: {
                    ticks: {
                        type: 'classic',
                        rounded: true,
                        inactiveColor: '#e1e5e8',
                        activeColor: '#6376DD',
                        sizeRatio: 0.9,
                        quantity: 100,
                        strokeWidth: 5,
                        gradient: {
                            show: true,
                            shiftHueIntensity: 10,
                        },
                    },
                },
                innerCircle: {
                    show: true,
                    stroke: '#e1e5e8ff',
                    strokeWidth: 1,
                },
                percentage: {
                    show: true,
                    fontSize: 48,
                    rounding: 0,
                    bold: true,
                    formatter: null,
                },
            },
            title: {
                text: 'CPU',
                color: '#1A1A1Aff',
                fontSize: 20,
                bold: true,
                textAlign: 'center',
                paddingLeft: 0,
                paddingRight: 0,
                subtitle: {
                    color: '#A1A1A1ff',
                    text: `使用率`,
                    fontSize: 16,
                    bold: false,
                },
            },
        },
    },
    userOptions: {
        show: false,
    },
});
</script>

<style scoped lang="scss">
.home-container {
    width: 100%;
    height: calc(100vh - 80px);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);

    .file-distribution-container {
        grid-area: 1 / 1 / 4 / 2;
    }

    .div2 {
        grid-area: 1 / 2 / 2 / 3;
    }
    .div3 {
        grid-area: 1 / 3 / 2 / 4;
    }
    .purchase-outbound-container {
        grid-area: 1 / 4 / 2 / 5;
        display: flex;
        align-items: center;
    }

    .div5 {
        grid-area: 2 / 2 / 3 / 3;
    }
    .div6 {
        grid-area: 2 / 3 / 3 / 4;
    }
    .div7 {
        grid-area: 2 / 4 / 3 / 5;
    }

    .cpu-container {
        grid-area: 3 / 2 / 4 / 3;
    }
    .memory-container {
        grid-area: 3 / 3 / 4 / 4;
    }
    .storage-container {
        grid-area: 3 / 4 / 4 / 5;
    }
}
</style>
